<template>
	<view class="df_statistics">
		<view class="statis_head">
			<image class="statis_head_img" :src="'https://community.chuangxiangdianli.com/images/propertyImg/tongji_1.png'" mode=""></image>
			<view class="statis_head_name">
				<text class="head_name_fl">{{nickName}}</text>
				<view class="head_name_fr" @click="choiceTime = true">
					<u-picker v-model="choiceTime" mode="time" :params="params" start-year="2015" end-year="2030" @confirm="confirmTime"></u-picker>
					<view>{{dateTime}}</view>
					<image :class="['pmt_fl_img', choiceTime? 'mode_img':'']" :src="'https://community.chuangxiangdianli.com/images/propertyImg/shui_up.png'"
					 mode=""></image>
				</view>
			</view>
			<!-- 电量 -->
			<view class="statis_head_con" v-if="pageType == 'electric'">
				<view class="head_con_fl">
					<text>年累计电量</text>
					<text>{{energyAnalyDeta.total_cost | total_cost}}</text>
					<text>千瓦时</text>
				</view>
				<view class="head_con_fr">
					<text>年累计电量</text>
					<text>{{energyAnalyDeta.total_count | total_count}}</text>
					<text>元</text>
				</view>
			</view>
			<!-- 水量 -->
			<view class="statis_head_con" v-if="pageType == 'water'">
				<view class="head_con_fl">
					<text>年累计水量</text>
					<text>{{energyAnalyDeta.total_cost | total_cost}}</text>
					<text>立方米</text>
				</view>
				<view class="head_con_fr">
					<text>年累计水量</text>
					<text>{{energyAnalyDeta.total_count | total_count}}</text>
					<text>元</text>
				</view>
			</view>
		</view>

		<view class="statis_con">
			<view class="sta_con_chart">
				<view class="chart_top">
					<text class="chart_top_fl" v-if="pageType == 'electric'">电量统计</text>
					<text class="chart_top_fl" v-if="pageType == 'water'">水量统计</text>
					<view class="chart_top_fr">
						<text :class="currTagIndex == 1? 'curr_tag':''" @click="currTagIndex = 1">周</text>
						<text :class="currTagIndex == 2? 'curr_tag':''" @click="currTagIndex = 2">月</text>
						<text :class="currTagIndex == 3? 'curr_tag':''" @click="currTagIndex = 3">年</text>
					</view>
				</view>

				<view class="chart_con">
					<canvas v-show="!showFeeStaListText" canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas>
					<u-empty text="暂无数据" mode="list" :show="showFeeStaListText"></u-empty>
				</view>

			</view>
			<view class="sta_con_table">
				<text class="table_title">费用统计</text>
				<view class="table_list">
					<view class="ta_li_he">
						<text>日期</text>
						<text v-if="pageType == 'electric'">电量(千瓦时)</text>
						<text v-if="pageType == 'water'">水量(立方米)</text>
						<text v-if="pageType == 'electric'">电费(元)</text>
						<text v-if="pageType == 'water'">水费(元)</text>
					</view>

					<view class="ta_li_item" v-for="(item,index) in feeStaList" :key="index">
						<text>{{item.day_time || 0}}</text>
						<text>{{item.count || 0}}</text>
						<text>{{item.cost || 0}}</text>
					</view>
					<!-- 数据为空 展示 -->
					<!-- <u-empty :show="showFeeStaListText"></u-empty> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import { getStorages } from '@/utils/storage.js'
	import {
		getTime
	} from '@/utils/utils'
	let canvaColumn = null
	export default {
		onLoad(option) {
			this.pageType = option.type
			this.nickName = getStorages('userInfo').nickName? getStorages('userInfo').nickName:''
		},
		onShow() {
			this.dateTime = getTime().split('.')[0]
			this.changeTitle(this.pageType)
			this.getServerData();
			this.getEnergyAnalysis()
		},
		data() {
			return {
				nickName: '',
				pageType: 'water',
				currTagIndex: 1,
				cWidth: '350',
				cHeight: '240',
				pixelRatio: 1,
				serverData: '',
				// 时间类型
				params: {
					year: true,
					month: false,
					day: false,
				},
				// 当前时间
				dateTime: null,
				// 时间选择
				choiceTime: false,
				// Y轴最大数据
				yMaxNum: 100,
				chartData: {
					categories: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
					series: [{
						"data": [0,0,0,0,0,0,0]
					}]
				},
				// 周 月 天
				cateType: 'week',
				// 费用统计列表
				feeStaList: [],
				// 页面数据
				energyAnalyDeta: {},
				// 是否展示空数据提示页面
				showFeeStaListText: false
			};
		},
		methods: {
			changeTitle(title) {
				if (title == 'water') {
					uni.setNavigationBarTitle({
						title: '用水统计'
					});
				} else {
					uni.setNavigationBarTitle({
						title: '用电统计'
					});
				}
			},
			// 给图表赋值
			getServerData() {
				this.showColumn("canvasColumn", this.chartData);
			},
			showColumn(canvasId, chartData) {
				let _this = this
				canvaColumn = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: false
					},
					fontSize: 11,
					background: '#FFFFFF',
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						disabled: true,
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						max: _this.yMaxNum,
					},
					dataLabel: true,
					width: _this.cWidth,
					height: _this.cHeight,
					extra: {
						column: {
							type: 'group',
							width: 20
						}
					}
				});
			},
			// 获取电水统计
			getEnergyAnalysis() {
				let data = {
					// 周week /月months / 年year
					cate: this.cateType,
					// 电/水
					type: this.pageType == 'water' ? 2 : 1,
					// 设备码
					code: 'KB51X29eoC32143281202',
					// 时间
					year: this.cateType != 'year' ? this.dateTime : ''
				}
				this.$mrequest2({
					url: 'Mini/bill/energyAnalysis',
					data
				}).then(res => {
					if (res.code == 200) {
						this.energyAnalyDeta = res.data 
						// 横坐标数据
						this.chartData.categories = res.data.xData
						// this.chartData.series.data = res.data.yData
						// 筛选数组最大值
						this.yMaxNum = this.screenMaxNum(res.data.yData)
						// 清空柱状图数据
						this.chartData.series = []
						// 设置数据
						let seriesData = {
							"data": res.data.yData
						}
						this.chartData.series.push(seriesData) 
						// 费用统计列表 feeStaList
						this.feeStaList = res.data.list
						this.showFeeStaListText = res.data.yData.length == 0
						this.getServerData();
					}
				})
			},
			// 确认时间选择
			confirmTime(time) {
				this.dateTime = time.year
				this.cateType = 'months'
				this.currTagIndex = 2
				this.getEnergyAnalysis()
			},
			// 筛选最大值
			screenMaxNum(arr){
				return Math.max(...arr)
			}
		},
		watch: {
			// 监听周 月 年统计
			currTagIndex(num) {
				this.chartData.series = []
				switch (num) {
					case 1:
						this.cateType = 'week';
						break;
					case 2:
						this.cateType = 'months';
						break;
					case 3:
						this.cateType = 'year';
						break;
				}
				this.getEnergyAnalysis()
				// this.getServerData()
			},
		},
		filters: {
			total_cost(type) {
				if (type) {
					return type.toFixed(2)
				} else {
					return 0 
				}
			},
			total_count(type) {
				if (type) {
					return type.toFixed(2)
				} else {
					return 0
				}
			}
		}
	}
</script>

<style lang="scss">
	.df_statistics {
		height: 100%;

		.mode_img {
			transform: rotate(180deg);
		}

		.statis_head {
			position: relative;
			height: 355rpx;
			background-color: #11a2ff;

			.statis_head_img {
				position: absolute;
				right: 0;
				bottom: -90rpx;
				width: 224rpx;
				height: 260rpx;
			}

			.statis_head_name {
				display: flex;
				justify-content: space-between;
				padding: 0 37rpx;
				height: 140rpx;
				line-height: 140rpx;
				font-size: 38rpx;
				color: #fff;
				font-weight: 700;

				.head_name_fr {
					position: relative;
					display: flex;
					justify-content: space-between;
					width: 140rpx;
					font-size: 28rpx;
					font-weight: 400;

					.pmt_fl_img {
						margin: auto 0;
						width: 19rpx;
						height: 19rpx;
					}
				}
			}

			.statis_head_con {
				position: relative;
				z-index: 100;
				display: flex;
				height: 154rpx;

				.head_con_fl,
				.head_con_fr {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					text-align: center;
					color: #fff;
					font-size: 26rpx;

					& text:nth-child(2) {
						font-size: 52rpx;
						font-size: 700;
					}
				}
			}
		}

		.statis_con {
			position: relative;
			top: -36rpx;
			padding: 34rpx;
			border-radius: 40rpx;
			background-color: #fff;

			.sta_con_chart {
				.chart_top {
					display: flex;
					justify-content: space-between;
					height: 108rpx;
					font-size: 32rpx;
					line-height: 108rpx;
					border-bottom: 2rpx solid #E0EAF1;

					.chart_top_fr {
						display: flex;
						justify-content: space-around;
						width: 300rpx;

						text {
							margin: auto 0;
							width: 82rpx;
							height: 52rpx;
							line-height: 52rpx;
							text-align: center;
							font-size: 26rpx;
							background: #FFFFFF;
							box-shadow: 0rpx 5rpx 11rpx 0rpx rgba(201, 201, 201, 0.33);
							border-radius: 10rpx;
						}

						.curr_tag {
							background-color: #11a2ff;
							color: #fff;
						}
					}
				}

				.chart_con {
					padding: 50rpx 0;
					height: 510rpx;
				}
			}

			.sta_con_table {

				// height: 500rpx;                                                                                            
				.table_title {
					height: 128rpx;
					line-height: 128rpx;
					font-size: 32rpx;
				}

				.table_list {

					.ta_li_he,
					.ta_li_item {
						display: flex;
						justify-content: space-between;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 26rpx;

						&>text {
							text-align: center;
						}
					}

					.ta_li_item {
						height: 111rpx;
						line-height: 111rpx;
						background-color: #f7f8f9;
					}
				}
			}
		}

		// 图表区
		.charts {
			width: 700rpx;
			height: 480rpx;
		}
	}
</style>
